<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性setter和getter</title>
</head>
<body>
  <div id="app">

    <h2> {{fullName}} </h2>

  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'John',
        lastName: 'Larkon',
      },
      //计算属性
      computed: {
        //完整写法,计算属性里fullName是个对象
        fullName: {
          //计算属性一般没有set方法，是只读属性
          set(newValue) {
            const names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          },
          get() {
            return this.firstName + ' ' + this.lastName;
          }
        }

        //当计算属性没有set方法时可简写为
        // fullName() {
        //   return this.firstName + ' ' + this.lastName;
        // }
      },
    })
  </script>
</body>
</html>